<template>
  <div class="home">
  
    <el-carousel :interval="5000" arrow="always">
      <el-carousel-item v-for="item in list" :key="item.id">
        <img :src="item.url" alt="" class="imgUrl" style="width:100%;height:100%;">
      </el-carousel-item>
    </el-carousel>
  
    <div class="main">
      <h5>功能导航</h5>
      <ul>
        <router-link to="/home" active-class="active">
          <li>在线考试</li>
        </router-link>
        <router-link to="/home" active-class="active">
          <li>我的成绩</li>
        </router-link>
        <router-link to="/home" active-class="active">
          <li>创建考试</li>
        </router-link>
        <router-link to="/home" active-class="active">
          <li>企业真题</li>
        </router-link>
      </ul>
    </div>
  </div>
</template>

<style lang="less">
@import '../common/less/varible.less';

.home {
  .el-carousel__item img {
    background-size: contain;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }

  .main {
    margin: 15px;
    h5{
      margin:20px 0;
      padding:10px 10px;
      border-bottom:2px solid pink;
    }
    ul {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;

      li {
        margin: 10px;
        padding: 15px 20px;
        font-size: 21px;
        background-color: pink;
        border-radius:15px;
      }
    }
  }
}
</style>

<script>
export default {
  data() {
    return {
      list: [
        {
          id: 1,
          url: 'http://127.0.0.1:4000/static/images/1.jpg'
        },
        {
          id: 2,
          url: 'http://127.0.0.1:4000/static/images/2.jpg'
        },
        {
          id: 3,
          url: 'http://127.0.0.1:4000/static/images/3.jpg'
        },
      ],
    }
  }
}
</script>